@extends('seller::layout.master')

@section('title', __($user->id ? 'seller::user.user_update' : 'seller::user.user_create'))

@section('page-bottom-btns')
  <button type="button" class="btn btn-primary w-min-100 submit-form btn-lg" form="form-seller-users">{{ __('common.save') }}</button>
  <button class="btn btn-lg btn-default w-min-100 ms-3" onclick="bk.back()">{{ __('common.return') }}</button>
@endsection

@section('content')
  <div id="shipping-app" class="card h-min-600">
    <div class="card-body">
      <form class="needs-validation" novalidate action="{{ $user->id ? seller_route('users.update', $user->id) : seller_route('users.store') }}"
        method="POST" id="form-seller-users">
        @csrf
        @method($user->id ? 'PUT' : 'POST')
        <ul class="nav nav-tabs nav-bordered mb-4" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-content" type="button" >{{ __('admin/product.basic_information') }}</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-permission" type="button">{{ __('seller::common.permissions') }}</button>
          </li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane fade show active" id="tab-content">
            <x-seller-form-input name="email" required :error="$errors->first('email')"  :title="__('seller::edit.email')" :value="old('email', $user->email ?? '')" />
            <x-seller-form-input name="name" required :error="$errors->first('name')"  :title="__('seller::user.name')" :value="old('name', $user->name ?? '')" />
            <x-seller-form-input name="password" required :error="$errors->first('password')"  :title="__('seller::login.password')" :value="old('password', '')" />
            <div class="row g-3 mb-3">
              <label class="wp-200 col-form-label text-end ">{{ __('common.language') }}</label>
              <div class="col-auto wp-200" name="locale">
                <select class="form-select me-3 wp-200" name="locale">
                  @foreach (locales() as $option)
                    <option value="{{ $option['code'] }}" {{ $option['code'] == $user->locale ? 'selected': '' }}>{{ $option['name'] }}</option>
                  @endforeach
                </select>
              </div>
            </div>
          </div>

          <div class="tab-pane fade" id="tab-permission">
            @if($user->is_root)
              {{ __('seller::common.permission.root_has_all_permission') }}
            @else
            <div class="roles-wrap border w-max-900">
              <div class="bg-dark p-2 text-dark bg-opacity-10 px-2">
                <el-button size="small" @click="updateAllState(true)">@lang('admin/admin_roles.select_all')</el-button>
                <el-button size="small" @click="updateAllState(false)">@lang('admin/admin_roles.unselect_all')</el-button>
              </div>

              <div v-for="role, index in permissions" :key="index">
                <div class="bg-light p-3 d-flex">
                  @{{ role.title }}
                  <div class="row-update ms-2 link-secondary">[<span @click="updateState(true, index)">{{ __('common.select_all') }}</span> / <span @click="updateState(false, index)">{{ __('common.cancel') }}</span>]</div>
                </div>
                <div class="role-methods">
                  <div class="d-flex flex-wrap px-3 py-1">
                    <div v-for="method, m_index in role.permissions" :key="index + '-' + m_index" class="me-3">
                      <el-checkbox class="text-dark" v-model="method.selected">@{{ method.name }}</el-checkbox>
                      <input type="checkbox" name="permissions[]" class="d-none" :checked="method.selected" :value="method.code">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            @endif
          </div>
        </div>

        <x-seller::form.row>
          <button type="submit" class="d-none">{{ __('common.save') }}</button>
        </x-seller::form.row>
      </form>
    </div>
  </div>
@endsection

@push('footer')
  <script>
    @if (session('success'))
      layer.msg('{{ session('success') }}')
    @endif
  </script>

  <script>
    new Vue({
      el: '#tab-permission',

      data: {
        permissions: @json($permissions ?? []),
      },

      methods: {
        updateState(type, index) {
          this.permissions[index].permissions.map(e => e.selected = !!type)
        },

        updateAllState(type) {
          this.permissions.forEach(e => {
            e.permissions.forEach(method => {
              method.selected = !!type
            });
          });
        },
      }
    })
  </script>

  <style>
    .roles-wrap .el-checkbox.text-dark .el-checkbox__label {
      font-size: 12px;
      padding-left: 6px;
    }

    .row-update {
      cursor: pointer;
      font-size: 12px;
    }
  </style>
@endpush
